﻿<style>
    .form-group {
        min-height: 23px;
    }
</style>
<h2>Please fill in the required information</h2>
<div class="well">
    <form id="example-advanced-form" action="#">
        <h3>Phone</h3>
        <fieldset class="">
            <legend>Mobile Phone Information(Mandatory)</legend>
            <h4></h4>
            <div class="form-group">
                <label class="control-label" for="phone">Phone Number</label>
                <div class="">
                    <div class="icon-addon addon-md">
                        <input type="text" placeholder="phone number" class="form-control required" id="phone">
                        <label for="phone" class="glyphicon glyphicon-phone" rel="tooltip" title="phone"></label>
                    </div>
                </div>
                <label id="phone-error" class="error" for="phone"></label>
            </div>
            <div class="form-group">
                <label class="control-label" for="phonecode">Verfiy Code</label>
                <div class="">
                    <div class="icon-addon addon-md">
                        <input type="text" placeholder="verfiy code" class="form-control required" id="phonecode">
                        <label for="email" class="glyphicon glyphicon-th" rel="tooltip" title="verfiy code"></label>
                    </div>
                </div>
                <label id="phonecode-error" class="error" for="phonecode"></label>
            </div>
            <p>(*) Mandatory</p>
        </fieldset>

        <h3>Email</h3>
        <fieldset class="">
            <legend>Mobile Phone Information(Mandatory)</legend>
            <h4></h4>
            <div class="form-group">
                <label class="control-label" for="phone">Phone Number</label>
                <div class="">
                    <div class="icon-addon addon-md">
                        <input type="text" placeholder="phone number" class="form-control required" id="phone">
                        <label for="phone" class="glyphicon glyphicon-phone" rel="tooltip" title="phone"></label>
                    </div>
                </div>
                <label id="phone-error" class="error" for="phone"></label>
            </div>
            <div class="form-group">
                <label class="control-label" for="phonecode">Verfiy Code</label>
                <div class="">
                    <div class="icon-addon addon-md">
                        <input type="text" placeholder="verfiy code" class="form-control required" id="phonecode">
                        <label for="email" class="glyphicon glyphicon-th" rel="tooltip" title="verfiy code"></label>
                    </div>
                </div>
                <label id="phonecode-error" class="error" for="phonecode"></label>
            </div>
            <p>(*) Mandatory</p>
        </fieldset>


        <h3>Password</h3>
        <fieldset>
            <legend>You are to young</legend>

            <p>Please go away ;-)</p>
        </fieldset>

        <h3>Profile</h3>
        <fieldset>
            <legend>Terms and Conditions</legend>
            <input id="acceptTerms" name="acceptTerms" type="checkbox" class="required"> <label for="acceptTerms">I agree with the Terms and Conditions.</label>
        </fieldset>
    </form>
</div>
<script>
    var form = $("#example-advanced-form").show();

    form.steps({
        headerTag: "h3",
        bodyTag: "fieldset",
        transitionEffect: "slideLeft",
        onStepChanging: function (event, currentIndex, newIndex) {
            // Allways allow previous action even if the current form is not valid!
            if (currentIndex > newIndex) {
                return true;
            }
            // Forbid next action on "Warning" step if the user is to young
            if (newIndex === 3 && Number($("#age").val()) < 18) {
                return false;
            }
            // Needed in some cases if the user went back (clean up)
            if (currentIndex < newIndex) {
                // To remove error styles
                form.find(".body:eq(" + newIndex + ") label.error").remove();
                form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
            }
            form.validate().settings.ignore = ":disabled,:hidden";
            return form.valid();
        },
        onStepChanged: function (event, currentIndex, priorIndex) {
            // Used to skip the "Warning" step if the user is old enough.
            if (currentIndex === 2 && Number($("#age").val()) >= 18) {
                form.steps("next");
            }
            // Used to skip the "Warning" step if the user is old enough and wants to the previous step.
            if (currentIndex === 2 && priorIndex === 3) {
                form.steps("previous");
            }
        },
        onFinishing: function (event, currentIndex) {
            form.validate().settings.ignore = ":disabled";
            return form.valid();
        },
        onFinished: function (event, currentIndex) {
            alert("Submitted!");
        }
    }).validate({
        errorPlacement: function errorPlacement(error, element) { element.before(error); },
        rules: {
            confirm: {
                equalTo: "#password"
            }
        }
    });
</script>